import React from 'react'
import { Layout, Button, Avatar, Dropdown } from 'antd';
import { MenuFoldOutlined } from '@ant-design/icons';
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { collapseMenu, closeAllTab } from '../../redux/reducers/tab'
import './index.css'

const { Header } = Layout;

const CommonHeader = () => {
  // useDispatch只能在组件函数中使用，一般函数或语句都不能使用
  const dispath = useDispatch()
  const navigate = useNavigate()

    // 退出登录，注意这里需要先声明logout，不然会触发暂时性死区（也就是items触发方法，但没有先一步声明初始化，会导致找不到该函数）
  const logout = () => {
    // 清楚token
    sessionStorage.removeItem('token')
    sessionStorage.removeItem('menu')
    dispath(closeAllTab())
    navigate('/login') 
  }

  const items = [
    {
      key: '1',
      label: (
        <a target="_blank" rel="noopener noreferrer">
          个人中心
        </a>
      ),
    },
    {
      key: '2',
      label: (
        <a onClick={logout}  target="_blank" rel="noopener noreferrer">
          退出登录
        </a>
      ),
    }
  ];



  // 收缩菜单栏
  const setCollapsed = () => {
    dispath(collapseMenu())
  }

  return (
    // 顶部
    <Header className="header-container">
      <Button
        type="text"
        icon={<MenuFoldOutlined />}
        style={{
          fontSize: '16px',
          width: 64,
          height: 32,
          backgroundColor: '#fff'
        }}
        onClick={setCollapsed}
      />
      <Dropdown
        menu={{items}}
        arrow
      >
        {/* <Avatar src="https://img1.baidu.com/it/u=1941754368,3189485105&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=749"/> */}
        <Avatar size={46} src={<img src={require("../../assets/images/baba.webp")} alt="迪丽热巴"/>} />
      </Dropdown>
    </Header>
  )
}

export default CommonHeader;